<template>
  <div :class="partThree" id="part-three"></div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
export default {
  name: "partThree",
  data() {
    return {
      partThree: "part-three",
      curWidth: 0
    };
  },
  beforeMount() {
    this.curWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    if (this.curWidth < 1600) {
      this.partThree = "part-three-responsive";
    }
  },
  mounted() {
    this.drawECharts();
  },
  methods: {
    drawECharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("part-three"));
      let postData = [ //后端传过来的值
        { value: 15, name: "HTML5" },
        { value: 15, name: "CSS3" },
        { value: 20, name: "JavaScript" },
        { value: 20, name: "jQuery" },
        { value: 30, name: "Vue" },
        { value: 15, name: "Node" },
        { value: 20, name: "微信小程序" },
        { value: 15, name: "其他" }
      ];
      var obj = {
        // 标题
        title: {
          // 标题文本
          text: "技能分布图",
          // 标题样式
          textStyle: {
            color: "#fff"
          },
          // 标题位置
          x: "center"
        },
        // 移动显示
        tooltip: {
          trigger: "item",
          // 显示文字样式
          formatter: "{a} <br/>{b} : {d}%"
        },
        // 注记
        legend: {
          x: "center",
          y: "bottom",
          textStyle: {
            color: "#fff"
          },
          data: [
            "HTML5",
            "CSS3",
            "JavaScript",
            "jQuery",
            "Vue",
            "Node",
            "微信小程序",
            "其他"
          ]
        },
        // 注记显示手柄
        calculable: true,
        // 图形系列
        series: [
          {
            name: "技能分布",
            type: "pie",
            radius: [40, 150],
            roseType: "area",
            data: postData
          }
        ],
        // 颜色调整
        color: [
          "#00bfff",
          "#00ffdd",
          "#207ffc",
          "#00aeff",
          "#00eeff",
          "#006eff",
          "#0099ff",
          "#0066ff"
        ]
      };
      myChart.setOption(obj);
      setInterval(function() {
        let temp = obj.series[0];
        temp.data[0].value = (Math.random() * 100).toFixed(2) - 0;
        temp.data[1].value = (Math.random() * 100).toFixed(2) - 0;
        temp.data[2].value = (Math.random() * 100).toFixed(2) - 0;
        temp.data[3].value = (Math.random() * 100).toFixed(2) - 0;
        temp.data[4].value = (Math.random() * 100).toFixed(2) - 0;
        temp.data[5].value = (Math.random() * 100).toFixed(2) - 0;
        temp.data[6].value = (Math.random() * 100).toFixed(2) - 0;
        temp.data[7].value = (Math.random() * 100).toFixed(2) - 0;
        myChart.setOption(obj);
      }, 10 * 1000);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.part-three {
  width: 100%;
  height: 480px;
  border: 40px solid transparent;
  border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
  background: #18202d;
}
.part-three-responsive {
  width: 100%;
  height: 480px;
  border: 10px solid transparent;
  border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
  background: #18202d;
}
</style>